<template>
    <div class="all">
        <el-menu :default-active="routepath" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
            
            <el-menu-item index="/upnext">次卡充值
                <!-- <el-badge :value="badgenum[1]" class="item" type="info" :max="99"> -->
                    <!-- <span @click="looknext()"></span> -->
                <!-- </el-badge> -->
            </el-menu-item>

            <el-menu-item index="/upbalance">余额充值
                <!-- <el-badge :value="badgenum[2]" class="item" type="primary" :max="99"> -->
                    <!-- <span @click="lookbalance()"></span> -->
                <!-- </el-badge> -->
            </el-menu-item>
        </el-menu>
        <router-view></router-view>
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <!-- <div class="btn"> -->
        <!-- </div> -->
        <!-- <el-button size="mini" type="primary"  @click="add()">添 加</el-button>
        <div class="table">
            <el-table
                :data="clerkTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <el-table-column label="城市" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.city }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="carType"
                    :filters="carTypeFilterList"
                    :filter-method="carTypeFilterHandler"
                    label="车辆类型"
                    width="160px"
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row.carType }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="充值次数" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.count }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="充值价格" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.topUpPrice }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="会员期限" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.memberLimit }}天</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.coupon }}张</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券金额" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.couponPrice }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券有效期" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.couponPriceLimit }}天</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            size="small"
                            type="danger"
                            @click="delClerk(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            
            <el-dialog title="添加" width="60%" :visible.sync="addVisible" center @close="closeAdd">
                <el-form :model="addClerk">
                    <div class="flex">
                        <el-form-item label="城市：" :label-width="formLabelWidth">
                            <el-select v-model="addClerk.city" clearable placeholder="请选择城市">
                                <el-option
                                    v-for="(item,index) in cityList"
                                    :key="index"
                                    :label="item.city"
                                    :value="item.cityValue"
                                ></el-option>
                            </el-select>
                            <span>市</span>
                        </el-form-item>
                        <el-form-item
                            style="margin-left:20px;"
                            label="车辆类型："
                            :label-width="formLabelWidth"
                        >
                            <el-select v-model="addClerk.carType" clearable placeholder="请选择车辆类型">
                                <el-option
                                    v-for="(item,index) in carTypeList"
                                    :key="index"
                                    :label="item.carType"
                                    :value="item.carTypeValue"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="充值次数：" :label-width="formLabelWidth">
                            <el-input clearable v-model="addClerk.count" placeholder="请输入充值次数"></el-input>
                            <span>次</span>
                        </el-form-item>
                        <el-form-item
                            style="margin-left:20px;"
                            label="优惠券数量："
                            :label-width="formLabelWidth"
                        >
                            <el-input clearable v-model="addClerk.coupon" placeholder="请输入优惠券数量"></el-input>
                            <span>张</span>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="充值价格：" :label-width="formLabelWidth">
                            <el-input clearable v-model="addClerk.topUpPrice" placeholder="请输入充值价格"></el-input>
                            <span>元</span>
                        </el-form-item>
                        <el-form-item
                            style="margin-left:20px;"
                            label="优惠券金额："
                            :label-width="formLabelWidth"
                        >
                            <el-input
                                clearable
                                v-model="addClerk.couponPrice"
                                placeholder="请输入优惠券金额"
                            ></el-input>
                            <span>元</span>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="会员期限：" :label-width="formLabelWidth">
                            <el-input
                                clearable
                                v-model="addClerk.memberLimit"
                                placeholder="请输入会员期限"
                            ></el-input>
                            <span>天</span>
                        </el-form-item>
                        <el-form-item
                            style="margin-left:20px;"
                            label="优惠券有效期："
                            :label-width="formLabelWidth"
                        >
                            <el-input
                                clearable
                                v-model="addClerk.couponPriceLimit"
                                placeholder="请输入优惠券有效期"
                            ></el-input>
                            <span>天</span>
                        </el-form-item>
                    </div>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelAdd">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                </div>
            </el-dialog>
            
            <el-dialog title="修改" width="60%" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editClerk">
                    <div class="flex">
                        <el-form-item label="城市：" :label-width="formLabelWidth">
                            <el-select v-model="editClerk.city" clearable placeholder="请选择城市">
                                <el-option
                                    v-for="(item,index) in cityList"
                                    :key="index"
                                    :label="item.city"
                                    :value="item.cityValue"
                                ></el-option>
                            </el-select>
                            <span>市</span>
                        </el-form-item>
                        <el-form-item
                            style="margin-left:20px;"
                            label="车辆类型："
                            :label-width="formLabelWidth"
                        >
                            <el-select v-model="editClerk.carType" clearable placeholder="请选择车辆类型">
                                <el-option
                                    v-for="(item,index) in carTypeList"
                                    :key="index"
                                    :label="item.carType"
                                    :value="item.carTypeValue"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="充值次数：" :label-width="formLabelWidth">
                            <el-input clearable v-model="editClerk.count" placeholder="请输入充值次数"></el-input>
                            <span>次</span>
                        </el-form-item>
                        <el-form-item
                            style="margin-left:20px;"
                            label="优惠券数量："
                            :label-width="formLabelWidth"
                        >
                            <el-input clearable v-model="editClerk.coupon" placeholder="请输入优惠券数量"></el-input>
                            <span>张</span>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="充值价格：" :label-width="formLabelWidth">
                            <el-input clearable v-model="editClerk.topUpPrice" placeholder="请输入充值价格"></el-input>
                            <span>元</span>
                        </el-form-item>
                        <el-form-item
                            style="margin-left:20px;"
                            label="优惠券金额："
                            :label-width="formLabelWidth"
                        >
                            <el-input
                                clearable
                                v-model="editClerk.couponPrice"
                                placeholder="请输入优惠券金额"
                            ></el-input>
                            <span>元</span>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label="会员期限：" :label-width="formLabelWidth">
                            <el-input
                                clearable
                                v-model="editClerk.memberLimit"
                                placeholder="请输入会员期限"
                            ></el-input>
                            <span>天</span>
                        </el-form-item>
                        <el-form-item
                            style="margin-left:20px;"
                            label="优惠券有效期："
                            :label-width="formLabelWidth"
                        >
                            <el-input
                                clearable
                                v-model="editClerk.couponPriceLimit"
                                placeholder="请输入优惠券有效期"
                            ></el-input>
                            <span>天</span>
                        </el-form-item>
                    </div>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
        </div> -->
    </div>
</template>

<script>
import "../../../../static/scss/page.scss";
import utils from "../../../util/request";
export default {
    data() {
        return {
            // 分页
            // routepath: "/upnext",
            // currentPage: 1, //初始页面
            // currentCount: 100, //当前页面的数据数量
            // pageResultSize: 10, //表格数据总数
            // screenWidth: window.innerWidth, //可视宽度
            // addVisible: false, //添加对话框
            // editVisible: false, //修改对话框
            // formLabelWidth: "120px", //对话框的标签宽度
            // shopname: "",
            // addClerk: {
            //     // 添加对话框
            //     city: "", //城市
            //     carType: "", //车辆类型
            //     count: "", //充值次数
            //     topUpPrice: "", //充值价格
            //     memberLimit: "", //会员限制
            //     coupon: "", //优惠券数量
            //     couponPrice: "", //优惠券金额
            //     couponPriceLimit: "" //优惠券有效期
            // },
            // editClerk: {
            //     // 修改对话框
            //     earningsId: "", //充值id
            //     city: "", //城市
            //     carType: "", //车辆类型
            //     count: "", //充值次数
            //     topUpPrice: "", //充值价格
            //     memberLimit: "", //会员限制
            //     coupon: "", //优惠券数量
            //     couponPrice: "", //优惠券金额
            //     couponPriceLimit: "" //优惠券有效期
            // },
            // clerkTable: [
            //     {
            //         city: "深圳", //城市
            //         carType: "小汽车", //车辆类型
            //         count: "4", //充值次数
            //         topUpPrice: "60", //充值价格
            //         memberLimit: "90", //会员限制
            //         coupon: "3", //优惠券数量
            //         couponPrice: "4", //优惠券金额
            //         couponPriceLimit: "90" //优惠券有效期
            //     },
            //     {
            //         city: "深圳", //城市
            //         carType: "SUV", //车辆类型
            //         count: "5", //充值次数
            //         topUpPrice: "100", //充值价格
            //         memberLimit: "90", //会员限制
            //         coupon: "3", //优惠券数量
            //         couponPrice: "6", //优惠券金额
            //         couponPriceLimit: "90" //优惠券有效期
            //     },
            //     {
            //         city: "深圳", //城市
            //         carType: "MPV", //车辆类型
            //         count: "6", //充值次数
            //         topUpPrice: "120", //充值价格
            //         memberLimit: "90", //会员限制
            //         coupon: "3", //优惠券数量
            //         couponPrice: "8", //优惠券金额
            //         couponPriceLimit: "90" //优惠券有效期
            //     }
            // ],
            // carTypeFilterList: [
            //     {
            //         text: "小汽车",
            //         value: "小汽车"
            //     },
            //     {
            //         text: "SUV",
            //         value: "SUV"
            //     },
            //     {
            //         text: "MPV",
            //         value: "MPV"
            //     }
            // ],
            // cityList: [
            //     {
            //         city: "深圳",
            //         cityValue: "深圳"
            //     },
            //     {
            //         city: "东莞",
            //         cityValue: "东莞"
            //     },
            //     {
            //         city: "广州",
            //         cityValue: "广州"
            //     }
            // ],
            // carTypeList: [
            //     {
            //         carType: "小汽车",
            //         carTypeValue: "小汽车"
            //     },
            //     {
            //         carType: "SUV",
            //         carTypeValue: "SUV"
            //     },
            //     {
            //         carType: "MPV",
            //         carTypeValue: "MPV"
            //     }
            // ]
        };
    },
    methods: {
        handleSelect(){

        },
        // add() {
        //     // 添加
        //     this.addVisible = true;
        // },
        // confirmAdd() {
        //     // 确认添加
        //     this.addVisible = false;
        // },
        // cancelAdd() {
        //     // 取消添加
        //     this.addClerk.serviceRevenue = "";
        //     this.addClerk.afterEarnings = "";
        //     this.addVisible = false;
        // },
        // closeAdd() {
        //     // 关闭添加
        //     this.addClerk.serviceRevenue = "";
        //     this.addClerk.afterEarnings = "";
        //     this.addVisible = false;
        // },
        // edit(index, row) {
        //     // 修改
        //     console.log(index,row);
        //     this.editVisible = true;
        // },
        // confirmEdit() {
        //     // 确认修改
        //     this.editVisible = false;
        // },
        // cancelEdit() {
        //     // 取消修改
        //     this.editClerk.serviceRevenue = "";
        //     this.editClerk.afterEarnings = "";
        //     this.editVisible = false;
        // },
        // closeEdit() {
        //     // 关闭修改
        //     this.editClerk.serviceRevenue = "";
        //     this.editClerk.afterEarnings = "";
        //     this.editVisible = false;
        // },
        // delClerk(index, row) {
        //     // 删除
        // },
        // carTypeFilterHandler(value, row, column) {
        //     // 车辆类型筛选过滤事件
        //     const property = column["property"];
        //     return row[property] === value;
        // },
        // //   表格居中
        // cellStyle: function({ row, column, rowIndex, columnIndex }) {
        //     return "text-align:center;";
        // },
        // rowClass: function({ row, rowIndex }) {
        //     return "text-align:center;";
        // },
        // allSelectionChange: function(val) {
        //     // 获取选中的内容
        //     console.log(val);
        // },
        // // 每页数据的数量
        // pageCount: function(val) {
        //     this.currentCount = val;
        // },
        // // 点击的第几页
        // currentPageCount: function(val) {
        //     this.currentPage = val;
        // },
        // // 跳页
        // looknext(){
        //     // this.
        // }
    },
    created() {
        // utils.request("/shop/list","post",JSON.stringify({page:1,list_rows:999999999})).then(resp=>{
        //     // console.log("店铺",resp)
        //     this.shopname = resp.data.data.data;
        // })
        //  utils.request("/rechargePackage/list","post",JSON.stringify({page:this.currentPage,list_rows:this.currentCount,recharge_type:1})).then(resp=>{
        //     console.log(resp)
        // })
    },
    computed: {
        routepath() {
            // console.log(this.$route,this.$route.meta.GuidePath ? this.$route.meta.JumpPath : this.$route.path)
            return this.$route.path;
        }
    },
};
</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    flex-flow: row wrap;
}
.el-menu.el-menu--horizontal{
    margin-bottom: 10px;
    border-bottom: 1px solid #c9c9c9;
}
.el-menu--horizontal>.el-menu-item{
    height: 40px;
    line-height: 40px;
    border: 1px solid #dbd9d9;
    border-radius: 5px 5px 0 0;
}
.el-menu--horizontal>.el-menu-item.is-active{
    color: #ffffff;
    background-color: #409EFF;
    border: 0;
    border-radius: 5px 5px 0 0;
}
</style>


